<template>
  <div>
    <template>
      <el-transfer
        v-model="value"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="签约单位"
        :data="data"
        @change="handleChange"
      />
    </template>
  </div>
</template>
<script>
export default {
  data() {
    // const generateData = _ => {
    //   const data = []
    //   const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
    //   const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']
    //   cities.forEach((city, index) => {
    //     data.push({
    //       label: city,
    //       key: index,
    //       pinyin: pinyin[index]
    //     })
    //   })
    //   return data
    // }
    return {
    //   data: generateData(),
      data: [{ label: '大哈哎', key: 0, pinyin: 'dada' }],
      value: [],
      subValue: []

    }
  },
  methods: {
    //   leftCheckChange(){

    //   },
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
      console.log('value', this.value)
      if (direction == 'right') {
        value.forEach((index) => {
          this.data[index].type = true
          this.subValue.push(this.data[index])
        })
      } else if (direction == 'left') {
        value.forEach((index) => {
        //   this.data[index].type = false
          //   this.subValue.push(this.data[index])
          //   this.subValue.remove(1)
          //   for (let i = 0; i < this.subValue.length; i++) {
          //     if (this.subValue[i].label == this.data[index].label) {
          //       this.subValue.push(this.subValue.splice(i))
          //     }
          //   }
          this.subValue = this.subValue.filter((item) => {
            return item.label != this.data[movedKeys].label
          })
        })
      }
      console.log('this.data.type', this.subValue)
    },
    filterMethod(query, item) {
      console.log(999, query, item)
      //   const resdata = _ => {
      //   const data = []
      //   const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
      //   const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']
      //   cities.forEach((city, index) => {
      //     data.push({
      //       label: city,
      //       key: index,
      //       pinyin: pinyin[index]
      //     })
      //   })
      //   const aaa = [{ label: '大1哈哎', key: 0, pinyin: 'bbb' }, { label: '大2哈哎', key: 1, pinyin: 'da2da' }, { label: '大3哈哎', key: 2, pinyin: 'da3da' }, { label: '大4哈哎', key: 3, pinyin: 'da7da' }]
      //   this.data = aaa
      // return this.data = data
      //   }
      //   console.log(resdata)
      //   this.data = resdata
      if (item.type == true) {
        // console.log(123)
        return item.pinyin.indexOf(query) > -1 && item.type == true
      } else {
        item.type == false
        // console.log(456)
        return item.pinyin.indexOf(query) > -1 && item.type != true
      }
    }
  }
}
</script>
<style lang='scss' scoped>
// .sys_client{
//   .el-form-item{
//         margin-bottom: 5px;
//   }
//   .el-form-item__label{
//     font-weight: bold;
//         margin-top: 5px;
//   }
//   .el-transfer{
//     .el-transfer-panel__list{

//       height: 320px !important;
//     }
//        .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{
//               color: #606266 !important;
//               font-size: 14px;
//         }
//     .el-transfer-panel__body{
//       height: 100%;
//     }
//     .el-transfer-panel__list.is-filterable{
//       height: 100%;
//     }
//         height: 440px;
//          .el-transfer-panel{
//     height: 420px;
//         width: 350px;
//         .el-input__prefix{
//           left: auto;
//     right: 10px;
//         }

//   }
//     .el-transfer__buttons{
//         padding: 0 4px;
//         .is-disabled{
//               background-color: #fff !important;
//         }

//   }
//   .el-transfer__button{
//          border-radius: 6px;
//             padding: 8px;
//   }

//   .el-transfer__button:nth-child(2){
//         margin: 0 10px 10px 10px !important;
//   }
//   }

// }
</style>
